<template>
    <el-dialog
        v-model="dialogVisible"
        title="新增地图"
        width="500px"
        @opened="handleDialogOpened"
        :before-close="handleClose"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        status-icon
    >
        <el-form-item label="地图名称" prop="name">
            <el-input v-model.trim="ruleForm.name" />
        </el-form-item>
        <el-form-item label="地图宽度" prop="width">
            <el-input v-model="ruleForm.width" type="number" />
        </el-form-item>
        <el-form-item label="地图高度" prop="height">
            <el-input v-model="ruleForm.height" type="number" />
        </el-form-item>
        <el-form-item label="描述">
            <el-input v-model.trim="ruleForm.description" type="textarea" :rows="3" />
        </el-form-item>
    </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleConfirm(ruleFormRef)">确 认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup lang="ts">
import { ref, defineEmits, defineProps, watch, reactive, onMounted, nextTick } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { addMap } from '@/api/map';
import * as util from  '@/utils';

const dialogVisible = ref(false);

interface Props {
	visible: boolean;
}

interface RuleForm {
  name: string;
  width: number | null;
  height: number | null;
  description: string
}

const props = defineProps<Props>();
watch(()=>props.visible,val=>{ dialogVisible.value = val })

const emit = defineEmits<{
    'close': [value: any]
}>()

function handleClose(value){
    emit('close',value);
}

const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive<RuleForm>({
    name: '',
    width: null,
    height: null,
    description: ''
})

const rules = reactive<FormRules<RuleForm>>({
    name: [ { required: true, message: '请填写地图名称', trigger: 'blur' }],
    width: [ { required: true, message: '请填写地图宽度', trigger: 'blur' }],
    height: [ { required: true, message: '请填写地图高度', trigger: 'blur' }],
})

async function handleDialogOpened(){
    ruleForm.name = '';
    ruleForm.width = null;
    ruleForm.height = null;
    ruleForm.description = '';
    await nextTick();
    ruleFormRef.value.clearValidate();
}

function handleConfirm(formEl: FormInstance){
    formEl.validate((valid, fields) => {
        if (valid) {
            const params = util.objectCopy(ruleForm);
            params.width = parseFloat(params.width);
            params.height = parseFloat(params.height);
            params.extra = JSON.stringify({ proportion: 10 });
            addMap(params).then(res=>{
                handleClose('add');
            })
        } else {
        console.log('error submit!', fields)
        }
    })
    
}

</script>

<style lang="scss" scoped>

</style>

